import { animateType } from "src/types/drawBoard"
import DrawiBoardBagua from "./drawiBoard-bagua"
import { Option } from "src/shape/Scene"
// import Stack from "src/utils/Stack"
import { Props, Shape } from "src/types/shape"
import { Tween } from "@tweenjs/tween.js"

export default class PPTFrame extends DrawiBoardBagua {
  animateType: animateType = ''
  count: number = 0
  animateClip: AnimateClip[] = []
  constructor(canvas: HTMLCanvasElement, option?: Option) {
    super(canvas, option)
    this.onMounted(this)

    setTimeout(() => {
      this.addAnimateGroup()
      this.animateClip[0].addAnimate({
        shape: this.shapes.find(shape => shape.type == 'Group') as unknown as Shape,
        property: 'x',
        to: 0,
        duration: 3000
      })
      this.animateClip[0].start()
    }, 2000)
  }

  // 任务队列
  taskQueue() { }

  // 增加动画分组
  addAnimateGroup() {
    this.animateClip.push(new AnimateClip())
  }

  onMounted(scene: this): void { }
  onBeforeUnMounted(scene: this): void { }
  onUnMounted(scene: this): void { }

  // 快照
  snapshot(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
    const image = new Image()
    ctx.clearRect(0, 0, 800, 500)
    for (let i = 0; i < this.shapes.length; i++) {
      this.shapes[i].draw(ctx, this.osCtx as OffscreenCanvasRenderingContext2D)
    }
    ctx.beginPath()
    ctx.font = '30px Arial'
    ctx.fillText('妙手空空' + this.count, 600 / 2, 500 - 20)
    ctx.closePath()
    ctx.stroke()
    image.src = canvas.toDataURL()
    return image
  }
}

class AnimateOption {
  shape!: Shape //形状
  property!: keyof Props //属性
  duration?: number = 0 //执行所需时间
  timingFunction?: string = '' //变换速率
  delay?: number = 0 //延迟时间
  start?: string | number | null = null
  to: string | number = 0
}
class AnimateClip {
  readonly id: number = Date.now()
  name: string = ''
  action: Tween<Props>[] = []
  isInitialize: boolean = false //是否初始化时启动
  private state: number = 0 // 0=静止，1=运动
  constructor(name?: string) {
    this.name = name || Date.now() + ''
  }
  addAnimate(option: AnimateOption) {
    if (!option.property || !option.shape) throw new Error(`property or shape type error`)
    const obj: any = {}
    obj[option.property] = option.to
    if (option.start != null && option.start != undefined) {
      // @ts-ignore
      option.shape.props[option.property] = option.start
    }
    
    this.action.push(
      new Tween(option.shape.props).to(obj, option.duration).delay(option.delay)
    )
  }
  removeAnimate(id: number) {
    const index = this.action.findIndex(item => item.getId() == id)
    if (index != -1) this.action.splice(index, 1)
  }
  start() {
    if (this.state == 1 || !this.action.length) return
    
    this.state = 1
    this.action.forEach((v, i) => {
      if (i === this.action.length - 1) return
      v.onComplete(() => {
        this.action[i + 1].start()
      })
    })

    this.action[this.action.length - 1].onComplete(() => {
      this.state = 0
    })
    this.action[0].start()
  }
  setName(name: string) {
    this.name = name
  }

}
// class TaskQueue extends Stack<AnimateOption[]> {
//   scene: PPTFrame
//   currentActions: Tween<Props>[] = []
//   constructor(scene: PPTFrame) {
//     super()
//     this.scene = scene
//   }
//   action() {
//     this.currentActions.length = 0
//     this.getCurrent()?.forEach(item => {
//     })
//   }
//   previous() {

//   }
//   next() {

//   }
// }